<template>
  <div class="workStage_process_status">
    <span class="block_label_color mad_label font_block"
          :class="stateColor">{{data.workstageProcessStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'WorkStageProcessStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据工单进度状态返回相应class
    stateColor() {
      switch (this.data.workstageProcessStatusValue) {
        // 待开工
        case 'ToBeStarted':
          return 'procedure_icon_started'
        // 已开工
        case 'Started':
          return 'procedure_icon_already'
        // 已完工
        case 'Finished':
          return 'procedure_icon_completed'
        // 未到达 NotArrive
        case 'NotArrive':
          return 'procedure_icon_notArrive'
      }
    }
  }
}
</script>

<style lang="less">
  /*工序状态*/
  // 待开工
  @mesProcedureStarted: #99e1ff;
  // 已开工
  @mesProcedureAlready: #ffef71;
  // 已完工
  @mesProcedureCompleted: #a0e7b1;
  // 已终止
  @mesProcedureTerminated: #7e8e9f;
  // 未到达
  @procedure_icon_notArrive: #ffc7c7;
  .workStage_process_status{
    .block_label_color{
      /*工序状态*/
      // 待开工
      &.procedure_icon_started{
        background-color: @mesProcedureStarted
      }
      // 已开工
      &.procedure_icon_already{
        background-color: @mesProcedureAlready
      }
      // 已完工
      &.procedure_icon_completed{
        background-color: @mesProcedureCompleted
      }
      // 已终止
      &.procedure_icon_terminated{
        background-color: @mesProcedureTerminated
      }
      // 未到达
      &.procedure_icon_notArrive{
        background-color: @procedure_icon_notArrive
      }
    }
  }
</style>
